<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>我的卡券</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/myCoupon.css" />
	<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
	<script type="text/javascript" src="js/common/jquery-1.11.0.js">

	</script>

</head>

<body>
	<div id="couponheader">
		<div class="top">
			<div class="top-left">
				<i class="fa fa-home fa-fw"></i>
				<a href="javascript:void(0)" class="one">门户首页</a>
			</div>
			<div class="top-right">
				<a class="one" href="javascript:void(0)">
					<i class="fa fa-qrcode fa-fw"></i> 下载APP
				</a>
				<a href="javascript:void(0)">
					<i class="fa fa-commenting-o fa-fw"></i>我的消息
				</a>
				<a href="javascript:void(0)">
					<i class="fa fa-cart-arrow-down fa-fw"></i>购物车
				</a>
				<a href="javascript:void(0)">
					<i class="fa fa-cog fa-fw"></i>系统设置
				</a>
				<a class="zhuli">
					<i class="fa fa-user"></i> 朱莉
				</a>
				<a href="javascript:void(0)">
					退出
				</a>
			</div>
		</div>
	</div>
	<div id="mycoupon">
		<!--<div class="include">-->
		<!--*******顶部图片加导航*********-->
		<div class="topbigbox">
			<div class="topbar">
				<div class="img">
					<img src="img/husheng.png" />
				</div>
				<div class="nav">
					<ul>
						<a href="#">
							<li>我的互生</li>
						</a>
						<a href="myOrder.html">
							<li>我的订单</li>
						</a>
						<a href="#">
							<li>我的求职</li>
						</a>
						<a href="myAppointment.html">
							<li>我的预约</li>
						</a>
						<a href="myCoupon.html">
							<li class='onenavchange'>我的卡券</li>
						</a>
						<a href="concern.html">
							<li>关注收藏</li>
						</a>
					</ul>
				</div>
				<!--*****建议反馈***-->
				<div class="suggest">
					<img src="img/fankui.png" />
					<span>建议反馈</span>
				</div>
			</div>
		</div>
		<div class="include">
			<div class="second">
				<div class="coupon">
					我的卡券
				</div>
				<div class="choose">
					<div class="discount">
						消费抵扣券
					</div>
					<div class="business">
						商家优惠券
					</div>
					<div class="card">
						会员卡
					</div>
				</div>
			</div>
			<!--二级导航-->
			<div class="coupondetail">
				<div class="navigationbar">
					<ul>
						<li>美食外卖</li>
						<li>商超便利</li>
						<li>电商</li>
						<li>休闲娱乐</li>
						<li>车交易</li>
					</ul>
				</div>
				<div class="botline"></div>
			</div>
			<!--三级导航-->
			<div class="couponlist">
				<div class="one">
					<ul>
						<li>未使用</li>
						<li>已使用</li>
						<li>已过期</li>
					</ul>
				</div>
				<!--京东的优惠券-->
				<div class="couponinfor">
					<div class="infor">
						<div class="img">
							<img src="img/jingd.png" />
						</div>
						<span class="shopname">
							必胜客科学城店
						</span>
						<span class="shopnum">
							(06 050 06 0000)
						</span>
						<i class="fa fa-angle-right"></i>
					</div>
					<div class="yhq">
						<!--wei使用的优惠券-->
						<div class="keuse">
							<div class="yhq-left">
								<h4><small>¥ </small>10</h4>
								<span>满500元可用</span>
								<div class="circle"></div>
							</div>
							<div class="yhq-right">
								<p class="deadline">有限期至:
									<span>2016.09.02至2016.10.02</span>
								</p>
								<p class="range">使用范围：
									<span>减肥套餐</span>
								</p>
								<p class="range">使用说明:<span>仅可购买单人体育游泳指定商品</span>
								</p>
							</div>
						</div>
						<!--已使用优惠券-->
						<div class="yhqused">
							<div class="yhq-left">
								<h4><small>¥ </small>10</h4>
								<span>满500元可用</span>
								<div class="circle"></div>
							</div>
							<div class="yhq-right">
								<p class="deadline">有限期至:
									<span>2016.09.02至2016.10.02</span>
								</p>
								<div class="position">
									<img src="img/haduse.png" />
								</div>
							</div>
						</div>
					</div>
					<!--已过期优惠券-->
					<div class="yhq2">
						<div class="yhqexpired">
							<div class="yhq-left">
								<h4><small>¥ </small>10</h4>
								<span>满500元可用</span>
								<div class="circle"></div>
							</div>
							<div class="yhq-right">
								<p class="deadline">有限期至:
									<span>2016.09.02至2016.10.02</span>
								</p>
								<div class="position">
									<img src="img/overdue.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--底部-->
		<div class="bottom">
			<div class="inset">
				<i class="fa fa-hand-o-right"></i>
				<span class="date">2013-2018</span>
				<span class="company">深圳市互生科技有限公司</span>
				<span class="icp">奥ICP备14100052号</span>
				<span class="icp">奥公网安备 44030402000494号</span>
			</div>
		</div>
</body>
<script>
	$(function () {
		//		   二级导航栏***********************
		$(".navigationbar ul li").click(function () {
			console.log("哈哈")
			$(this).addClass("navigationbarchange").siblings().removeClass("navigationbarchange");
		});
		//			一级导航************************************
		$(".nav ul li").click(function () {
			console.log("哦豁")
			$(this).addClass("navchange").siblings().removeClass("navchange");
		});
		//			三级导航*************************************88
		$(".one ul li").click(function () {
			console.log("哦豁")
			$(this).addClass("onechange").siblings().removeClass("onechange");
			var i = $(".one ul li").index(this);
			console.log(i)
		});
		$(".choose div").click(function () {
			console.log("嘿嘿嘿")
			$(this).addClass("choosechange").siblings().removeClass("choosechange")

		})



	})

</script>

</html>